import React, { useCallback } from 'react'
// @ts-ignore
import Styles from './index.scss'
// @ts-ignore
import LoginIcon from '../../../icons/login.svg'
import Router from 'next/router'
import { useSelector, useDispatch } from 'react-redux'
import { StoreType } from '@store/types'
import WImage from '@components/global/image'
import { Modal, Toast } from 'antd-mobile'
// @ts-ignore
import LogoutIcon from '../../../icons/off.svg'
import { logout } from '@store/auth/actions'

const SetUser = () => {

  const userModel = useSelector<StoreType, any>((store) => store.auth)
  const dispatch = useDispatch()

  const logoutBtnClick = useCallback(() => {
    Modal.alert('提示', '确定要退出嘛?', [
      { text: '取消' },
      { text: '确定', onPress: () => {
        // @ts-ignore
        dispatch(logout()).then(() => {
          Toast.success('退出成功')
        })
      } },
    ])
  }, [])

  return (
    <div className={`${Styles['user-box']} w-flex-center`}>
      {
        userModel.user ? <>
          <WImage
            width={90}
            height={90}
            url={userModel.icon}
            round
            lazyLoad={false} />
          <span className={Styles['user-name']}>{userModel.user}</span>
          <LogoutIcon
            className={Styles['logout-icon']} 
            onClick={ logoutBtnClick }/>
        </>
          :
          <LoginIcon onClick={() => Router.push('/login')} className={Styles['login-icon']} />
      }
    </div>
  )
}

export default SetUser
